<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用函数</title>
    <!-- 一般引入js文件，都是在 head 标签内部 -->
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">
        .inner{
            background-color: aqua;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>

<div style="background-color: red;" id="outer">
    <ul id="inner">
        <li>tomcat</li>
        <li>jboss</li>
        <li>jetty</li>
    </ul>
</div>

<button type="button" id="firstButton">修改DOM元素</button>
<button type="button" id="secondButton">解除事件</button>
<script type="text/javascript">
    let dblclickFunction = function(){
        console.log( "鼠标双击了 ") ;
    } ;
    // 这样的写法，默认就表示了一个事件 ： window.onload()
    $(function (){
        $("#firstButton").bind( "dblclick" , dblclickFunction );
        $("#firstButton").bind( "mouseover" , dblclickFunction );
        $("#secondButton").bind( "click" , function(){
            // 解除事件
            $("#firstButton").unbind( "dblclick" , dblclickFunction ) ;
            $("#firstButton").unbind( "mouseover" , dblclickFunction ) ;
        });

    }) ;
</script>

</body>
</html>